<template>
  <div class="container">
    <a-table
      :columns="columns"
      :data-source="data"
      style="margin-top: 10px"
      :rowKey="
        (record, index) => {
          return index
        }
      "
      bordered
      :pagination="{ pageSize: 20 }"
    >
      <template
        v-for="col in ['flupDate', 'organization', 'status', 'doctorName', 'receiver']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">Save</a>
            <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a-button @click="LookReport(index)"> 查看报告 </a-button>
            <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="confirm(index)">
              <template slot="title">
                <p>确定删除吗？</p>
              </template>
              <a-button type="primary" style="margin-left: 30px">删除报告</a-button>
            </a-popconfirm>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import { postAction, getAction, deleteAction } from '@/api/manage'

import { PAGE_MENU_TYPE } from '@/store/mutation-types'

const columns = [
  {
    title: '序号',
    dataIndex: 'dataId',
    align: 'center',
    width: 130,
  },
  {
    title: '报告名称',
    dataIndex: 'reportName',
    align: 'center',
  },
  {
    title: '报告时间',
    dataIndex: 'reportCreateTime',
    align: 'center',
  },
  {
    title: '操作',
    width: 300,
    align: 'center',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
]

const data = []
export default {
  name: 'Week',
  data() {
    this.cacheData = data.map((item) => ({ ...item }))

    return {
      data,
      columns,
      visitMonth: '',
      pagination1: false,
      form: this.$form.createForm(this),
      visible: false,

      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),

      url: {
        getMonthList: 'patient/report/page',
        removeMonthList: 'patient/report/remove',
      },

      editingKey: '',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
    }
  },
  created() {
    this.getMonthList()
  },
  methods: {
    LookReport(index) {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      query.title = this.data[index].reportName
      this.$router.push({
        path: '../report/First',
        query,
      })
    },
    confirm(index) {
      let params = {
        id: this.data[index].dataId,
      }
      deleteAction(this.url.removeMonthList, params).then((res) => {
        if (res.success) {
          this.$message.success('删除成功！')
          this.getMonthList()
        }
      })
    },
    add() {
      this.visible = true
    },
    showDrawer() {
      this.cleanForm()
      this.visible = true
    },
    onClose() {
      this.visible = false
    },

    getMonthList() {
      this.data = []
      let params = {
        patientId: this.queryParam.patientId,
        type: 3,
      }
      postAction(this.url.getMonthList, params).then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.count; i++) {
            this.data.push({
              dataId: res.result.recordList[i].dataId,
              reportCreateTime: res.result.recordList[i].reportCreateTime,
              reportName: res.result.recordList[i].reportName,
            })
          }
          console.log(this.data)
        }
      })
    },

    handleChange(value, key, column) {
      const newData = [...this.data]
      const target = newData.filter((item) => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    edit(key) {
      const newData = [...this.data]
      const target = newData.filter((item) => key === item.key)[0]
      this.editingKey = key
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save(key) {
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter((item) => key === item.key)[0]
      const targetCache = newCacheData.filter((item) => key === item.key)[0]
      if (target && targetCache) {
        delete target.editable
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
      this.editingKey = ''
    },
    cancel(key) {
      const newData = [...this.data]
      const target = newData.filter((item) => key === item.key)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.cacheData.filter((item) => key === item.key)[0])
        delete target.editable
        this.data = newData
      }
    },
  },
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.ant-table-bordered .ant-table-thead > tr > th,
.ant-table-bordered .ant-table-tbody > tr > td {
  text-align: center;
}
.ant-drawer-mask {
  background-color: rgba(0, 0, 0, 0.045);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
